<template>
    <el-card class="content-previous-poetry">
        <div class="content-previous-header">
            <img class="previous-left" :src="previous_left">
            <div class="previous-left-box">
                <img class="previous-center" :src="previous_support">
                <span>八月十五</span>
            </div>
            <img class="previous-right" :src="previous_right">
        </div>

        <div class="content-previous-paragraphs">
            <span class="paragraphs-title">{{ content.title }} </span>
            <span class="paragraphs-author">{{ content.author }} </span>
            <span class="paragraphs-line" v-for="sp in content.poetryList">{{ sp }}</span>
        </div>
    </el-card>
</template>

<script>
import previous_support from "@/assets/images/icon/category_bg.png";
import previous_left from "@/assets/images/icon/left.png";
import previous_right from "@/assets/images/icon/right.png";

export default {
    name: "PreviousPoetryComponent",
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            previous_support: previous_support,
            previous_left: previous_left,
            previous_right: previous_right,
            content: {}
        }
    },
    mounted() {
        this.content = this.item;
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.content-previous-poetry {
    width: 780px;
    height: auto;
    margin: 20px auto 10px;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;

    .content-previous-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    img.previous-center {
        width: 120px;
        height: 36px;
    }

    img.previous-left, img.previous-right {
        width: 69px;
        height: 18px;
    }

    .content-previous-paragraphs {
        padding: 10px;
        display: flex;
        flex-direction: column;

        span {
            padding: 10px 0;
        }

        span.paragraphs-title {
            font-size: 18px;
        }

        span.paragraphs-author {
            font-size: 14px;
        }

        span.paragraphs-line {
            font-size: 16px;
        }
    }

    .previous-left-box {
        position: relative;
        width: 120px;
        height: 48px;

        img {
            width: 120px;
            height: 48px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        span{
            position: absolute;
            left: 0;
            top: -2px;
            width: 120px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            color: #f3f3f3;
            font-size: 16px;
            font-weight: 400;
        }
    }

}
</style>
